<%--
  Created by IntelliJ IDEA.
  User: Jafrin
  Date: 9/3/12
  Time: 11:04 AM
  To change this template use File | Settings | File Templates.
--%>

<g:javascript src="slideDownBoxMenu/jquery.easing.1.3.js"/>
<script type="text/javascript">
    $(function() {

        $('#sdt_menu > li').bind('mouseenter',function(){
            var $elem = $(this);
            $elem.find('img')
                    .stop(true)
                    .animate({
                        'width':'170px',
                        'height':'80px',
                        'left':'0px'
                    },400,'easeOutBack')
                    .andSelf()
                    .find('.sdt_wrap')
                    .stop(true)
                    .animate({'top':'140px'},500,'easeOutBack')
                    .andSelf()
                    .find('.sdt_active')
                    .stop(true)
                    .animate({'height':'170px'},300,function(){
                        var $sub_menu = $elem.find('.sdt_box');
                        if($sub_menu.length){
                            var left = '170px';
                            if($elem.parent().children().length == $elem.index()+1)
                                left = '-170px';
                            $sub_menu.show().animate({'left':left},200);
                        }
                    });
        }).bind('mouseleave',function(){
                    var $elem = $(this);
                    var $sub_menu = $elem.find('.sdt_box');
                    if($sub_menu.length)
                        $sub_menu.hide().css('left','0px');

                    $elem.find('.sdt_active')
                            .stop(true)
                            .animate({'height':'0px'},300)
                            .andSelf().find('img')
                            .stop(true)
                            .animate({
                                'width':'0px',
                                'height':'0px',
                                'left':'85px'},400)
                            .andSelf()
                            .find('.sdt_wrap')
                            .stop(true)
                            .animate({'top':'25px'},500);
                });
    });
</script>

<div class="content">

    <ul id="sdt_menu" class="sdt_menu">

        <li>
            <a href="#">
                <img src="${createLink(uri: '/')}images/menu/1.jpg" alt=""/>
                <span class="sdt_active"></span>
                <span class="sdt_wrap">
                    <span class="sdt_link">Projects</span>
                    %{--<span class="sdt_descr">Get to know me</span>--}%
                </span>
            </a>
            <div class="sdt_box" style="margin-top: 2px;">
                <a href="${createLink(uri: '/')}project/show">Create new Projects</a>
            </div>
        </li>
        <li>
            <a href="#">
                <img src="${createLink(uri: '/')}/images/menu/1.jpg" alt=""/>
                <span class="sdt_active"></span>
                <span class="sdt_wrap">
                    <span class="sdt_link">Tools</span>
                    %{--<span class="sdt_descr">My work</span>--}%
                </span>
            </a>
            <div class="sdt_box">
                    <a href="${createLink(uri: '/')}question/show">Create new  Questions</a>
                    <a href="${createLink(uri: '/')}question/genQuestionFirstStep">Generate Question</a>
                    <a href="${createLink(uri: '/')}interview/interviewFirstStep">Interview</a>
            </div>
        </li>
        <li>
            <a href="#">
                <img src="${createLink(uri: '/')}images/menu/3.jpg" alt=""/>
                <span class="sdt_active"></span>
                <span class="sdt_wrap">
                    <span class="sdt_link">Security</span>
                    <span class="sdt_descr">Where ideas get born</span>
                </span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="${createLink(uri: '/')}images/menu/4.jpg" alt=""/>
                <span class="sdt_active"></span>
                <span class="sdt_wrap">
                    <span class="sdt_link">Setup</span>
                    <div class="sdt_box">
                        <a href="${createLink(uri: '/')}project/show">Create new Projects</a>
                        <a href="${createLink(uri: '/')}answeringType/show">Answering type</a>
                        <a href="${createLink(uri: '/')}questionAnsweringOption/show">Answering Option</a>
                    </div>
                    %{--<span class="sdt_descr">I like to photograph</span>--}%
                </span>
            </a>
            %{--<div class="sdt_box">--}%
                %{--<a href="${createLink(uri: '/')}project/show">Create new Projects</a>--}%
                %{--<a href="${createLink(uri: '/')}answeringType/show">Answering type</a>--}%
                %{--<a href="${createLink(uri: '/')}questionAnsweringOption/show">Answering Option</a>--}%
            %{--</div>--}%
        </li>
        <li>
            <a href="#">
                <img src="${createLink(uri: '/')}images/menu/5.jpg" alt=""/>
                <span class="sdt_active"></span>
                <span class="sdt_wrap">
                    <span class="sdt_link">Reports</span>
                    <span class="sdt_descr">I write about design</span>
                </span>
            </a>
            <div class="sdt_box">
                <a href="#">Job Board Website</a>
                <a href="#">Shopping Cart</a>
                <a href="#">Interactive Maps</a>
            </div>
        </li>
        <li>
            <a href="#">
                <img src="${createLink(uri: '/')}images/menu/6.jpg" alt=""/>
                <span class="sdt_active"></span>
                <span class="sdt_wrap">
                    <span class="sdt_link">About Us</span>
                    <span class="sdt_descr">I like to code</span>
                </span>
            </a>
        </li>
    </ul>
</div>
